<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新闻发现页面</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/tab.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
</head>
<body>

<section class="aui-flexView ">
    <header class="aui-navBar aui-navBar-fixed b-line">
        <a href="javascript:history.go(-1);" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">骡窝新闻</span>
        </div>
        <a href="javascript:;" class="aui-navBar-item">
                    <span class="aui-cancel">
                        <i class="icon icon-tags"></i>
                    </span>
        </a>
    </header>
    <section class="aui-scrollView aui-tab" data-ydui-tab id="news">
        <div class="aui-form-search b-line">
            <div class="tab-nav-over">
                <ul class="tab-nav">
                    <li class="tab-nav-item tab-active">
                        <a href="javascript:;">
                            <span>头条</span>
                        </a>
                    </li>
                    <li class="tab-nav-item">
                        <a href="javascript:;">
                            <span>体育</span>
                        </a>
                    </li>
                    <li class="tab-nav-item">
                        <a href="javascript:;">
                            <span>科技</span>
                        </a>
                    </li>
                    <li class="tab-nav-item">
                        <a href="javascript:;">
                            <span>国际</span>
                        </a>
                    </li>
                    <li class="tab-nav-item">
                        <a href="javascript:;">
                            <span>娱乐</span>
                        </a>
                    </li>
                    <li class="tab-nav-item ">
                        <a href="javascript:;">
                            <span>社会</span>
                        </a>
                    </li>
                    <li class="tab-nav-item">
                        <a href="javascript:;">
                            <span>国内</span>
                        </a>
                    </li>
                    <li class="tab-nav-item">
                        <a href="javascript:;">
                            <span>财经</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="tab-panel">
            <div class="tab-panel-item tab-active" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <div class="tab-panel-item" render-loop="data">
                <a render-key="data.url" render-fun="handle" class="aui-news-item b-line">
                    <h2 render-html="data.title"></h2>
                    <p render-html="data.date"></p>
                    <div class="aui-news-page">
                               <span>
                                   <img render-src="data.thumbnail_pic_s" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s02" alt="">
                               </span>
                        <span>
                                   <img render-src="data.thumbnail_pic_s03" alt="">
                               </span>
                    </div>
                    <div class="aui-flex">
                        <div class="aui-flex-user">
                            <img src="images/user-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <p render-html="data.author_name"></p>
                        </div>
                    </div>
                </a>
                <!--<a href="javascript:;" class="aui-news-item b-line">-->
                <!--<h2>中美外交安全对话9日在美举行</h2>-->
                <!--<p>-->
                <!--中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。中国外交部发言人华春莹6日下午宣布，经双方商定，第二轮中美外交安全对话将于11月9日在美国华盛顿举行。</p>-->
                <!--<div class="aui-news-page">-->
                <!--<span>-->
                <!--<img src="images/ad-004.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-005.png" alt="">-->
                <!--</span>-->
                <!--<span>-->
                <!--<img src="images/ad-003.png" alt="">-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="aui-flex">-->
                <!--<div class="aui-flex-user">-->
                <!--<img src="images/user-001.png" alt="">-->
                <!--</div>-->
                <!--<div class="aui-flex-box">-->
                <!--<p>南方新闻周刊</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            </div>
            <!--<div class="tab-panel-item ">-->
            <!--<a href="javascript:;" class="aui-news-item b-line">-->
            <!--<h2>让世界听到你的故事</h2>-->
            <!--<p>今年6月，博雅小学堂创立了第一个中国第一个少年知识渊博演讲大会"博雅说的少年"、中国崭新新一代再这里向世界讲述了我们做过的</p>-->
            <!--<div class="aui-news-page">-->
            <!--<span>-->
            <!--<img src="images/ad-001.png" alt="">-->
            <!--</span>-->
            <!--<span>-->
            <!--<img src="images/ad-002.png" alt="">-->
            <!--</span>-->
            <!--<span>-->
            <!--<img src="images/ad-003.png" alt="">-->
            <!--</span>-->
            <!--</div>-->
            <!--<div class="aui-flex">-->
            <!--<div class="aui-flex-user">-->
            <!--<img src="images/user-001.png" alt="">-->
            <!--</div>-->
            <!--<div class="aui-flex-box">-->
            <!--<p>南方新闻周刊</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--</a>-->
            <!--</div>-->
        </div>

    </section>
</section>

</body>
<script>
    //发送ajax请求获取所有攻略的评论
    // $.get("/data/news", function (data) {
    //     console.log(data);
    //     // $("#comments").renderValues(data,{
    //     //     handle: function (ele, val) {
    //     //         ele.href = "/comment/strategyComment.html?id=" + val;
    //     //     }});
    // });
    var cache = {}; //缓存已经访问过的分类
    var url = '/data/news';
    // var url = '/data/news1';
    $.ajax(url, {
        data: {
            'type': 'top'
        },
        scriptCharset: 'utf-8',
        dataType: 'json',
        success: function (data) {
             console.log(data.result);
            if (data){
                $("#news").renderValues(data.result, {
                    handle: function (ele, val) {
                        ele.href = val;
                    }
                });
            }

        }
    });

    // $('.tab-nav-item').toggle(function () {
    //     console.log(this);
    // });
    // $('.tab-nav-item').on('toggle',function(){
    //     console.log(this);
    // });

    $(document).on("click", ".tab-nav-item", function () {
        // console.log($(this).find("span").html());
        // $(".tab-panel span").html("");
        $(".tab-panel").find("span").html("");
        // $(".tab-panel p").html("");
        $(".tab-panel").find("p").html("");
        // $(".tab-panel h2").html("");
        $(".tab-panel").find("h2").html("");
        $(".tab-panel").find("img").attr("src", "");
        var keyword = $(this).find("span").html();
        switch (keyword) {
            case '体育':
                keyword = 'tiyu';
                break;
            case '社会':
                keyword = 'shehui';
                break;
            case '国内':
                keyword = 'guonei';
                break;
            case '国际':
                keyword = 'guoji';
                break;
            case '娱乐':
                keyword = 'yule';
                break;
            case '财经':
                keyword = 'caijing';
                break;
            case '科技':
                keyword = 'keji';
                break;
            case 'shishang':
                keyword = 'shishang';
                break;
            default:
                keyword = 'top';
        }

        var news = cache[keyword];
        if (news) {
            $("#news").renderValues(news, {
                handle: function (ele, val) {
                    ele.href = val;
                }
            });
        } else {
            $.ajax(url, {
                data: {
                    'type': keyword
                },
                scriptCharset: 'utf-8',
                dataType: 'json',
                success: function (data) {
                    if (data){
                        cache[keyword] = data.result;
                        $("#news").renderValues(data.result, {
                            handle: function (ele, val) {
                                ele.href = val;
                            }
                        });
                    }

                }
            });
        }

    });
</script>
</html>
